<!DOCTYPE html>
<html>
<head>
    <title>login</title>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("input").focus(function(){
                $(this).css("border-bottom-color","#1E90FF").css("border-width","3px");
            });
            $("input").blur(function(){
                $(this).css("border-bottom-color","grey").css("border-width","1px");
            });
        });
    </script>
    <!-- <script>
        $(document).ready(function(){
         if($("#in1").val()!=null&&$("#in2").val()!=null)
         {
             $("button").animate({transform:scale(1.2,1.2)})
         }
        });
    </script> -->
    <script>
        $(document).ready(function(){
            $("input").focus(function(){
                $("p").css({transform-translate:'0px,-20px',font-size:'10px'});
            });
            $("input").blur(function(){
                $("p").css({transform-translate:'0px,20px',font-size:'16px'});
            });
        });
    </script>
    <style>
        div#d1{
            background-image:url('bg/480.webp');
            position: relative;
            left:35%;
            top:60px;
            width:350px;
            height: 320px;
            padding: 30px;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }
        div.d2{
            padding-top: 3px;
            margin-top: 20px;
        }
        h1{
            font-weight: 900;
        }
        input{
            position:absolute;
            width: 350px;
            border-top-style: none;
            border-left-style: none;
            border-right-style: none;
            /*border-bottom-color:grey;*/
            border-width: 2px;
        }
        p{
            font-size:16px;
            font-weight: 900;
            color:grey;
        }
        button{
            position:absolute;
            top:300px;
            background-color: #1E90FF;
            width:350px;
            height: 45px;
            text-align: center;
            color: white;
            font-weight: 900;
        }
    </style>
</head>
<body>
<div id="d1">
    <div>
        <h1>Login</h1>
    </div>
    <div class="d2">
        <p>Email</p>
        <input id="in1" type="text" name="Email"><br>
    </div>
    <div class="d2">
        <p>Password</p>
        <input id="in2" type="Password" name="Password">
    </div>
    <div class="d2">
        <button type="button">Submit</button>
    </div>
</div>
</body>
</html>